<template>
  <div class="vm_log_index">
    <ga-range-picker style="width: 240px; margin-bottom: 16px" @change="onChange" />
    <ga-timeline mode="left" v-if="auditLog?.length > 0">
      <ga-timeline-item
        position="bottom"
        dot-type="hollow"
        v-for="(item, index) in auditLog"
        :key="index"
        :dotColor="index % 2 === 0 ? '#52C419' : '#FF8F0D'"
      >
        <template #label>
          <div class="content_main">
            <p class="text_overflow">
              {{ item?.message || "-" }}
            </p>
          </div>
        </template>
        <div class="content flex_between_aligncenter">
          <span class="title" :style="{ color: index % 2 === 0 ? '#52C419' : '#FF8F0D' }">
            {{ item?.title || "-" }}
          </span>
          <span class="time">{{ item?.time || "-" }}</span>
        </div>
      </ga-timeline-item>
    </ga-timeline>
    <ga-empty v-else />
  </div>
</template>

<script setup>
import { ref, defineEmits, defineExpose } from "vue";

const auditLog = ref([
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
  { title: "无审计日志", time: "2024-01-01 00:00:00", message: "无审计日志" },
]);
// 时间选择器
const onChange = (val) => {
  const arr = ["finished_time__gte", "finished_time__lte"];
  if (val) {
    arr.forEach((item, index) => {
      formModel.value[item] = val[index];
    });
  } else {
    arr.forEach((item) => {
      formModel.value[item] = "";
    });
  }
  fetchData();
};
// const props = defineProps({
//   // 标题
//   title: {
//     type: String,
//     default: "温馨提示",
//   },
// });
// const emits = defineEmits(["handleSubmit"]);
// defineExpose({});
// const handleTabChange = (tab) => {
//   emits('handleTabChange', tab)
// }
</script>

<style lang="scss" scoped>
.vm_log_index {
  max-height: calc(100vh - 118px);
  overflow-y: auto;
  padding: 0 24px;
}
</style>
